computer science [Computer Science] Redux란? 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. 👉 상태 관리 라이브러리를 사용하면 👉 상태 관리 툴 종류 상태를 변화시키는 방법은 오직 액션을 일으키는 것이다. 이것은 상태를 변화시키는 의도를 정확하게 표현할 수 있고, 상태 변경에 대한 추적이 용이해지게 된다. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다. 리듀서는 현재 상태... Reactcomputer scienceReact [Computer Science] React 렌더링 성능 최적화 React.memo를 통해 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수형 컴포넌트의 리렌더링 성능을 최적화 해줄 수 있다. 또 그 함수가 리턴되는 값이 자식 컴포넌트에도 사용이 된다면, 그 자식 컴포넌트도 함수가 호출 될 때마다 새로운 값을 받아 리렌더링 된다. 즉, 함수 호출 시간도 세이브할 수 있고 같은 값을 props로 받는 하위 컴포넌트의 리렌더링도 방지... computer scienceReactReact [Computer Science] 클래스형 컴포넌트 vs 함수형 컴포넌트 React 컴포넌트를 만들때 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있다 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로... computer sciencecomputer science [Computer Science] var, let, const의 차이 자바스크립트에서 변수 선언할 때 사용되는 var, let, const는 도대체 어떤 차이점이 있을까? 간단하게 알아보았다. var var로 변수 선언을 했을 때 가장 큰 특징은 중복 선언이 가능하다는 점이다. 위와 같이 중복 선언을 했을 때 에러가 발생하지 않고 중복 선언이 가능하다. ES6에서는 이런 중복 선언이 가능한 문제를 해결하기 위해 let과 const를 추가했다. let let의 ... computer sciencecomputer science [Computer Science] 이벤트 버블링과 캡처링 이벤트 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 1. <p>에 할당된 onclick 핸들러가 동작한다. 2. 바깥의 <div>에 할당된 핸들러가 동작한다. 3. 그 바깥의 <form>에 핧당된 핸들러가 동작한다. 4. d... computer sciencecomputer science [Computer Science] Virtual Dom 이란? DOM(Document Object Model)의 약자로 간단하게 설명하면 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(Object)로 변환하는 것이다. DOM은 내가 작성한 HTML로 부터 생성되지만, 브라우저가 알아서 필요한 노드들을 붙여준다. 예를 들어, <head>나 <body> 없이 <html>안에 어떠한 내용을 작성하더라... computer sciencecomputer science [Computer Science] promise vs async & await 동기 vs 비동기 ? 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질때까지 아무것도 못하고 대기해야 한다는 단점이 있고, 비동기방식은 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다는 장점이 있다. promise 1) promise 란? promise는 비동기 처리를 위해 사용되는 객체이다. promise를... computer sciencecomputer science [Computer Science] Hoisting 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다. 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(실행 컨텍스트를 위한 과정)을 거친다. 코드 실행 전 이미 변수선언 / 함수선언이 저장되어 있기 때문에 선언문보다 참조 / 호출이 먼저 나와도 오류 없이 동작한다. 변수 Hoisting (var, let, const) let, const, cl... computer sciencecomputer science 모두를 위한 컴퓨터 과학 (CS50 2019) - C언어_2강. 문자열 C는 오래된 언어이기 때문에 변수가 저장하는 데이터의 종류를 아주 정확하게 명시해줘야 한다. 문자열(string) / 이때 string을 형식지정자라고 한다. 프로그래밍 언어에서 '='은 오른쪽에서 왼쪽으로 가는 화살표와 비슷하다. 이를 할당연산자라고 한다. 터미널창에 아래 명령어를 입력하여 컴파일을 할 수 있다. -> 여기서 -o string은 string.c를 string.out이라는 머... computer sciencecomputer science Data Structure #1 - Hash Table 해시테이블은 해시 함수를 활용해서 키를 해시값으로 매핑하고, 이 해시값을 색인(인덱스) 또는 주소 삼아 데이터를 key와 함께 저장하는 자료구조를 뜻한다. ➡️ [key:value]로 데이터를 저장하는 자료구조 해시 테이블의 구성 해시테이블은 키(key), 값(value), 해시함수(hash function), 해시(hash), 데이터가 저장되는 곳(bucket, slot)으로 구성되어 있다... computer sciencedata structurecomputer science CS; Computer Science(feat. David J. Malan) 즉, 그 문제에 대한 답을 찾는 것이다 일의 자리부터 2의 0제곱, 십의 자리는 2의 1제곱, ··· 이런식으로 곱해서 그 값들을 다 더하면 123가 나올 것이다 위에서 계속 언급된 OO의 자리의 자리를 우리는 컴퓨터에서는 bit라고 부르고 전구의 켜고 끔 같은 정보를 저장할 수 있다 이렇게하여 위와 같은 다양한 데이터들을 표현할 수 있게 된다 그 중에 문자를 숫자로 표현할 수 있도록 정해진... 부스트코스CScomputer science컴퓨터 과학CS [CS] 1. Cookie, Session, Cache 클라이언트(로컬, 브라우저)에 저장되고 통신 시의 이름, 경로, 상태 등의 정보가 key, value로 저장 접근 권한이 모두에게 주어지기 때문에 보안이 매우 약함 만료 기간 지정이 가능하며 브라우저 종료 시에도 유지 가능 세션에 비해 빠른 속도 1개 당 4KB 클라이언트는 300개까지 저장 가능 도메인 당 20개까지 저장 가능하며, 초과할 경우 빈도수가 낮은 것부터 삭제 팝업 차단, 즐겨찾... computer sciencecomputer science 모두를 위한 컴퓨터 과학 (CS50 2019) - C언어 int main(void)는 스크래치의 "초록색 깃발을 클릭했을 때" 블록과 같은 역할 #include <stdio.h>는 "stdio.h"라는 이름의 파일을 찾아서 "printf"함수에 접근할 수 있도록 해줌. 이를 2진수로 작성된 "머신 코드"로 변환해야 컴퓨터가 이해할 수 있다. clang hello.c 라는 명령어는 "clang"이라는 컴파일러로 "hello.c"라는 코드를 컴파일하라... computer sciencecomputer science CS 03 | 브라우저 동작 원리 웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어 오픈소스 브라우저 (파이어폭스, 크롬, 사파리 등) 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 렌더링 엔진 HTML 요청 → HTML과 CSS를 파싱*하여 화면에 표시 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지 HTML 마크업을 처리하... computer sciencefrontend브라우저 동작 원리computer science 동적계획법으로 푸는 피보나치 수열 피보나치 수열에 대해 코드로 구현할려면 반복문을 이용한 방법과 재귀함수를 이용한 방법 등등 나눠져있다. 위의 피보나치 로직은 재귀함수로 구현하였는데 숫자를 크게 잡은 경우 콘솔창이 먹통되는 현상을 경험했을 것이다. 대략 n이 30에 근접할 때부터 출력 로딩이 길어지는데, 도대체 왜 이런 현상이 발생할까? 그 이유를 알기 위해 트리 구조로 해당 코드를 세분화 해보았다. fibonachi(n) ... JavaScript알고리즘computer scienceJavaScript
[Computer Science] Redux란? 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. 👉 상태 관리 라이브러리를 사용하면 👉 상태 관리 툴 종류 상태를 변화시키는 방법은 오직 액션을 일으키는 것이다. 이것은 상태를 변화시키는 의도를 정확하게 표현할 수 있고, 상태 변경에 대한 추적이 용이해지게 된다. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다. 리듀서는 현재 상태... Reactcomputer scienceReact [Computer Science] React 렌더링 성능 최적화 React.memo를 통해 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수형 컴포넌트의 리렌더링 성능을 최적화 해줄 수 있다. 또 그 함수가 리턴되는 값이 자식 컴포넌트에도 사용이 된다면, 그 자식 컴포넌트도 함수가 호출 될 때마다 새로운 값을 받아 리렌더링 된다. 즉, 함수 호출 시간도 세이브할 수 있고 같은 값을 props로 받는 하위 컴포넌트의 리렌더링도 방지... computer scienceReactReact [Computer Science] 클래스형 컴포넌트 vs 함수형 컴포넌트 React 컴포넌트를 만들때 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있다 과거에는 클래스형 컴포넌트를 많이 사용했지만 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다. 클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로... computer sciencecomputer science [Computer Science] var, let, const의 차이 자바스크립트에서 변수 선언할 때 사용되는 var, let, const는 도대체 어떤 차이점이 있을까? 간단하게 알아보았다. var var로 변수 선언을 했을 때 가장 큰 특징은 중복 선언이 가능하다는 점이다. 위와 같이 중복 선언을 했을 때 에러가 발생하지 않고 중복 선언이 가능하다. ES6에서는 이런 중복 선언이 가능한 문제를 해결하기 위해 let과 const를 추가했다. let let의 ... computer sciencecomputer science [Computer Science] 이벤트 버블링과 캡처링 이벤트 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 1. <p>에 할당된 onclick 핸들러가 동작한다. 2. 바깥의 <div>에 할당된 핸들러가 동작한다. 3. 그 바깥의 <form>에 핧당된 핸들러가 동작한다. 4. d... computer sciencecomputer science [Computer Science] Virtual Dom 이란? DOM(Document Object Model)의 약자로 간단하게 설명하면 HTML과 자바스크립트를 이어주는 공간으로, 내가 작성한 HTML을 자바스크립트가 이해할 수 있도록 객체(Object)로 변환하는 것이다. DOM은 내가 작성한 HTML로 부터 생성되지만, 브라우저가 알아서 필요한 노드들을 붙여준다. 예를 들어, <head>나 <body> 없이 <html>안에 어떠한 내용을 작성하더라... computer sciencecomputer science [Computer Science] promise vs async & await 동기 vs 비동기 ? 동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질때까지 아무것도 못하고 대기해야 한다는 단점이 있고, 비동기방식은 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다는 장점이 있다. promise 1) promise 란? promise는 비동기 처리를 위해 사용되는 객체이다. promise를... computer sciencecomputer science [Computer Science] Hoisting 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다. 자바스크립트 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정(실행 컨텍스트를 위한 과정)을 거친다. 코드 실행 전 이미 변수선언 / 함수선언이 저장되어 있기 때문에 선언문보다 참조 / 호출이 먼저 나와도 오류 없이 동작한다. 변수 Hoisting (var, let, const) let, const, cl... computer sciencecomputer science 모두를 위한 컴퓨터 과학 (CS50 2019) - C언어_2강. 문자열 C는 오래된 언어이기 때문에 변수가 저장하는 데이터의 종류를 아주 정확하게 명시해줘야 한다. 문자열(string) / 이때 string을 형식지정자라고 한다. 프로그래밍 언어에서 '='은 오른쪽에서 왼쪽으로 가는 화살표와 비슷하다. 이를 할당연산자라고 한다. 터미널창에 아래 명령어를 입력하여 컴파일을 할 수 있다. -> 여기서 -o string은 string.c를 string.out이라는 머... computer sciencecomputer science Data Structure #1 - Hash Table 해시테이블은 해시 함수를 활용해서 키를 해시값으로 매핑하고, 이 해시값을 색인(인덱스) 또는 주소 삼아 데이터를 key와 함께 저장하는 자료구조를 뜻한다. ➡️ [key:value]로 데이터를 저장하는 자료구조 해시 테이블의 구성 해시테이블은 키(key), 값(value), 해시함수(hash function), 해시(hash), 데이터가 저장되는 곳(bucket, slot)으로 구성되어 있다... computer sciencedata structurecomputer science CS; Computer Science(feat. David J. Malan) 즉, 그 문제에 대한 답을 찾는 것이다 일의 자리부터 2의 0제곱, 십의 자리는 2의 1제곱, ··· 이런식으로 곱해서 그 값들을 다 더하면 123가 나올 것이다 위에서 계속 언급된 OO의 자리의 자리를 우리는 컴퓨터에서는 bit라고 부르고 전구의 켜고 끔 같은 정보를 저장할 수 있다 이렇게하여 위와 같은 다양한 데이터들을 표현할 수 있게 된다 그 중에 문자를 숫자로 표현할 수 있도록 정해진... 부스트코스CScomputer science컴퓨터 과학CS [CS] 1. Cookie, Session, Cache 클라이언트(로컬, 브라우저)에 저장되고 통신 시의 이름, 경로, 상태 등의 정보가 key, value로 저장 접근 권한이 모두에게 주어지기 때문에 보안이 매우 약함 만료 기간 지정이 가능하며 브라우저 종료 시에도 유지 가능 세션에 비해 빠른 속도 1개 당 4KB 클라이언트는 300개까지 저장 가능 도메인 당 20개까지 저장 가능하며, 초과할 경우 빈도수가 낮은 것부터 삭제 팝업 차단, 즐겨찾... computer sciencecomputer science 모두를 위한 컴퓨터 과학 (CS50 2019) - C언어 int main(void)는 스크래치의 "초록색 깃발을 클릭했을 때" 블록과 같은 역할 #include <stdio.h>는 "stdio.h"라는 이름의 파일을 찾아서 "printf"함수에 접근할 수 있도록 해줌. 이를 2진수로 작성된 "머신 코드"로 변환해야 컴퓨터가 이해할 수 있다. clang hello.c 라는 명령어는 "clang"이라는 컴파일러로 "hello.c"라는 코드를 컴파일하라... computer sciencecomputer science CS 03 | 브라우저 동작 원리 웹 브라우저는 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어 오픈소스 브라우저 (파이어폭스, 크롬, 사파리 등) 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 렌더링 엔진 HTML 요청 → HTML과 CSS를 파싱*하여 화면에 표시 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지 HTML 마크업을 처리하... computer sciencefrontend브라우저 동작 원리computer science 동적계획법으로 푸는 피보나치 수열 피보나치 수열에 대해 코드로 구현할려면 반복문을 이용한 방법과 재귀함수를 이용한 방법 등등 나눠져있다. 위의 피보나치 로직은 재귀함수로 구현하였는데 숫자를 크게 잡은 경우 콘솔창이 먹통되는 현상을 경험했을 것이다. 대략 n이 30에 근접할 때부터 출력 로딩이 길어지는데, 도대체 왜 이런 현상이 발생할까? 그 이유를 알기 위해 트리 구조로 해당 코드를 세분화 해보았다. fibonachi(n) ... JavaScript알고리즘computer scienceJavaScript